<template>
  <template v-if="loadingIsShow"> </template>
  <template v-else>
    <!-- 头部菜单栏 -->
    <div class="song-header">
      <div class="song-header-button" @click="menuShow = !menuShow">
        <van-button type="default"
          >全部歌单<van-icon name="arrow"
        /></van-button>
        <!-- 分类菜单 -->
        <div class="song-list-menu" v-show="menuShow">
          <!-- 头部全部歌单 -->
          <div class="song-menu-header">
            <span @click="getMenuNameData(songGroupByData.all.name, false)"
            :class="songGroupByData.all.name == tag?'song-menu-header-text menu-active':'song-menu-header-text'"
            >{{
              songGroupByData.all.name
            }}</span>
          </div>
          <!-- 菜单内容区 -->
          <div class="song-menu-container">
            <div
              class="menu-page"
              v-for="(item, index) in songGroupByTabData"
              :key="index"
            >
              <!-- 左侧概括 -->
              <div class="menu-all">
                <i :class="item.icon"></i>
                <span>{{ item.text }}</span>
              </div>
              <!-- 右侧详细标签 -->
              <div class="menu-sub-box">
                <template
                  v-for="(newGroupByData, newIndexSub) in songGroupByNewData[
                    index
                  ]"
                  :key="newIndexSub"
                >
                  <div
                    class="menu-name"
                    @click="
                      getMenuNameData(newGroupByData.name, newGroupByData.hot)
                    "
                  >
                    <div class="menu-name-box">
                      <span
                        :class="
                          newGroupByData.name == tag
                            ? 'menu-active menu-name-text'
                            : 'menu-name-text'
                        "
                        >{{ newGroupByData.name }}
                      </span>
                      <i v-if="newGroupByData.hot == true"></i>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧热门菜单 -->
      <div class="song-hot-list">
        <span
          v-for="(item, index) in songHotListData"
          :key="index"
          @click="getMenuNameData(item.name, true)"
          :class="tag == item.name ? 'hot-text menu-active' : 'hot-text'"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <!-- 内容区 -->
    <div class="song-list-content">
      <song-list-cover-vue
        :songListCoverData="songListCoverData"
      ></song-list-cover-vue>
    </div>
    <!-- 分页器 -->
    <div class="song-list-paging">
      <paging-vue :paging="paging"></paging-vue>
    </div>
  </template>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from "vue";
import axios from "axios";
import songListCoverVue from "../../../../components/songListCover/songListCover.vue";
import pagingVue from "../../../../components/paging/paging.vue";

// 热门菜单数据
const songHotListData = ref("");

// loading
const loadingIsShow = ref(true);

// 菜单显示隐藏
const menuShow = ref(false);

// 获取热门菜单数据
const getHotListData = () => {
  axios
    .get(`/playlist/hot`)
    .then((res) => {
      songHotListData.value = res.data.tags;
    })
    .catch((err) => {
      console.error(err);
    });
};
getHotListData();

// 获取歌单分类数据
const songGroupByData = ref([]);

// 更改 歌单分类数据 categories 的值
const songGroupByTabData = ref([]);

// 分组序号
const groupByNum = ref(0);

// 分类后的新数据
const songGroupByNewData = ref({
  0: [],
  1: [],
  2: [],
  3: [],
  4: [],
});

const songTabIconData = [
  "iconfont icon-duoyuyan",
  "iconfont icon-dianfengge",
  "iconfont icon-coffekafei",
  "iconfont icon-xiaolianxiaolian",
  "iconfont icon-zhuti",
];

// 获取获取歌单分类数据
const getSongGroupByData = async () => {
  await axios
    .get(`/playlist/catlist`)
    .then((res) => {
      songGroupByData.value = res.data;
      // 将左侧 tab 栏数据改造成数组
      songTabIconData.forEach((ele, index) => {
        songGroupByTabData.value.push({
          icon: ele,
          text: res.data.categories[index],
        });
      });
      groupByData();
      loadingIsShow.value = false;
    })
    .catch((err) => {
      console.error(err);
      loadingIsShow.value = false;
    });
};
getSongGroupByData();

// 将右侧分类数据分组
const groupByData = () => {
  songGroupByData.value.sub.forEach((ele, index) => {
    // 达到数据上限
    if (groupByNum.value >= 5) return;
    // 分组序号和 groupByNum 一致时
    if (ele.category == groupByNum.value) {
      songGroupByNewData.value[groupByNum.value].push(ele);
      songGroupByData.value[index] = {};
    }
    // 完成一轮
    if (index == songGroupByData.value.sub.length - 1) {
      groupByNum.value++;
      // 递归调用
      groupByData();
    }
  });
};

/**
 * 请求参数列表
 * tag 热门关键词
 * order new 或 hot 对应不同的列表
 * limit 一次请求多少数据 默认30 开发100
 * offset 偏移 用于分页
 * page 页码
 */

// 获取点击对象
const getMenuNameData = (menuName, isHOT) => {
  // 点击标签重新赋值
  tag.value = menuName;
  isHOT == true ? "hot" : "new";
  paging.page = 1;
  getSongListCoverData();
};

// 歌单请求参数 (关键字、order为默认)
const tag = ref("全部歌单");
const order = ref("new");

// 传递给分页器的数据
let paging = reactive({
  limit: 100,
  page: 1,
  total: 0,
});

// 歌单列表数据
const songListCoverData = ref("");

// 获取歌单列表数据
const getSongListCoverData = async () => {
  // 默认请求100 偏移0
  await axios
    .get(
      `/top/playlist?cat=${tag.value}&order='${order.value}'&limit=${
        paging.limit
      }&offset=${(paging.page - 1) * paging.limit}`
    )
    .then((res) => {
      songListCoverData.value = res.data.playlists;
      paging.total = res.data.total;
    })
    .catch((err) => {
      console.error(err);
    });
};

// 页面加载时
onMounted(() => {
  getSongListCoverData();
});

// 监听页码改变 重新发起请求
watch(
  () => paging.page,
  () => {
    getSongListCoverData();
  },
  { deep: true, immediate: true }
);
</script>
<style lang="less">
@import url(../../../../assets/fonts/song-list-menu/iconfont.css);

//   选中样式
.menu-active {
  background-color: #fdf5f5 !important;
  color: #ec4141 !important;
}

.song-header {
  width: 1100px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;

  .song-header-button {
    position: relative;

    .song-list-menu {
      z-index: 98;
      background-color: white;
      position: absolute;
      top: 42px;
      width: 740px;
      height: 700px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 3px;
      box-shadow: 4px 1px 10px #0000000f;

      .song-menu-header {
        position: relative;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px !important;

        .song-menu-header-text {
          display: inline-block;
          text-align: center;
          width: 80px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          border-radius: 40px;

          &:hover {
            color: #ec4141;
            cursor: default;
          }
        }
      }

      .song-menu-header,
      .song-menu-container {
        padding: 20px;
      }

      .song-menu-container {
        font-size: 13px;
        .menu-page {
          display: flex;

          .menu-all {
            width: 120px;
            display: flex;

            i {
              font-size: 24px;
              color: rgba(0, 0, 0, 0.605);
            }
            span {
              margin-left: 4px;
              color: rgba(0, 0, 0, 0.205);
            }
          }
          .menu-sub-box {
            width: 600px;
            margin-bottom: 20px;

            .menu-name {
              display: inline-block;
              width: 97px;
              margin-bottom: 10px;

              .menu-name-box {
                position: relative;
              }

              &:hover {
                color: #ec4141;
                cursor: pointer;
              }

              .menu-name-text {
                display: inline-block;
                padding: 0 12px;
                border-radius: 20px;
              }
              i {
                display: inline-block;
                transform: scale(0.5);
                color: #f52c2c;
                font-weight: 600;

                &::after {
                  content: "HOT";
                  position: absolute;
                  top: -28px;
                  left: -15px;
                }
              }
            }
          }
        }
      }
    }

    .van-button--default {
      border-radius: 50px;
      height: 30px;
      border: 1px solid #d8d8d8;

      &:hover {
        background-color: #f2f2f2;
      }
    }
  }
  .song-hot-list {
    display: flex;
    .hot-text {
      padding: 0px 10px;
      height: 24px;
      line-height: 24px;
      border-radius: 24px;
      color: rgba(0, 0, 0, 0.585);

      &:hover {
        cursor: pointer;
        color: rgba(0, 0, 0, 0.885);
      }
    }
  }
}

.song-list-content {
  margin-top: 4px;
}

.song-list-paging {
  margin-top: 80px;
  .paging {
    margin-bottom: 0;
  }
}
</style>